<template>
  <div class="edit-panel" v-show="editPanelVisible">
    <ul class="types">
      <li v-for="([mapKey], index) in objectsMap" :key="index">
        {{ mapKey }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, shallowRef } from 'vue'
import { useFabricStore } from '@/stores/fabric'
import { storeToRefs } from 'pinia'
import { flatGroups } from '@/utils/fabricOprationTools'

const fabricStore = useFabricStore()
const { setEditPanelVisible } = fabricStore
const { canvas, editPanelVisible } = storeToRefs(fabricStore)

const selectedObjects = shallowRef([])

const flatObjects = computed(() => flatGroups(selectedObjects.value))
const objectsMap = computed(() =>
  flatObjects.value.reduce((acc, cur) => {
    acc.has(cur.type) || acc.set(cur.type, [])
    acc.get(cur.type).push(cur)
    return acc
  }, new Map()),
)

const initEditPanel = () => {
  canvas.value.on('selection:created', ({ selected }) => {
    selectedObjects.value = selected
  })
  canvas.value.on('selection:updated', ({ selected }) => {
    selectedObjects.value = selected
  })
  canvas.value.on('object:modified', (e) => {
    console.log(e)
  })
}

onMounted(() => {
  initEditPanel()
})
</script>

<style lang="scss" scoped>
.edit-panel {
  position: absolute;
  left: 1rem;
  top: 4rem;
  min-width: max-content;
  width: 10rem;
  max-height: 90vh;
  background-color: #262933;
  padding: 10px 0;
  border-radius: 10px;
  box-shadow:
    rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  color: #ddd;
  font-size: 14px;
}
</style>
